<template>
  <div class="comment-list">
    <template v-if="list.length > 0">
      <el-row class="comment-item" type="flex" v-for="(item, index) in list" :key="index">
        <edu-avatar
          shape="circle"
          :size="40"
          :src="item.avatar_url"
          @click="goUser(item.user_id)"
        ></edu-avatar>
        <div class="comment-wrap">
          <el-row type="flex" align="middle" justify="space-between">
            <div class="name" @click="goUser(item.user_id)">{{ item.nick_name }}</div>
            <div class="lou">{{ index + 1 }}楼</div>
          </el-row>
          <div class="text">{{ item.content }}</div>
          <el-row type="flex" align="middle">
            <el-row class="time-msg" type="flex">
              <div class="msg-item">{{ item.create_time | formatTime('{y}-{m}-{d}') }}</div>
            </el-row>
            <div
              v-if="glob_user_id == item.user_id"
              class="del-btn"
              @click="handleDeleteComment(item)"
            >
              删除
            </div>
            <el-row class="eval-msg" type="flex">
              <el-link :underline="false" @click="handleCommentClick(item.id)">
                <i
                  class="edu-icon-pinglun edu-icon--left"
                  :class="{ active: item.reply_count > 0 }"
                ></i>
                <span class="num">{{ item.reply_count }}</span>
              </el-link>
              <edu-like
                @like="handleCommentLike(item.id, $event)"
                :like="item.liked_count"
                :count="item.like_count"
              ></edu-like>
            </el-row>
          </el-row>
          <el-collapse-transition>
            <detail-reply-list
              v-loading="loading"
              :id="replyId"
              v-if="replyListActive[0] == item.id"
              @updateCount="updateCommentCount($event, item)"
            ></detail-reply-list>
          </el-collapse-transition>
        </div>
      </el-row>
    </template>
    <edu-no-data :image="false" text="暂时还没有评论哦~" v-else></edu-no-data>
  </div>
</template>

<script>
import DetailReplyList from './detailCommentReplyList'
import EduLike from '@/components/EduLike'
import EduNoData from '@/components/EduNoData'
import { mapGetters } from 'vuex'
export default {
  components: {
    DetailReplyList,
    EduLike,
    EduNoData
  },
  props: ['list'],
  inject: ['reload'],
  data() {
    return {
      commentReplyList: [],
      replyListActive: [], // 当前激活的面板名称数组
      replyId: 0,
      loading: false
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'user/isLogin',
      getUserInfo: 'user/accountInfo'
    }),
    // 当前用户是自己id
    glob_user_id() {
      if (!this.isLogin && this.$util.isEmpty(this.getUserInfo)) return 0
      return this.getUserInfo.id
    }
  },
  watch: {
    replyList: {
      handler(now, old) {
        this.commentReplyList = now
      },
      deep: true
    }
  },
  methods: {
    setActiveNames(activeNames) {
      // 返回activeNames数组
      activeNames = [].concat(activeNames)
      this.replyListActive = activeNames
    },
    // 展开回复列表
    handleCommentClick(item) {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1000)
      this.commentReplyList = []
      this.setActiveNames(
        (this.replyListActive[0] || this.replyListActive[0] === 0) &&
          this.replyListActive[0] === item
          ? ''
          : item
      )
      let index = this.replyListActive.indexOf(item)
      if (index > -1) {
        // 当前未激活状态
        this.replyId = item
      }
    },
    // 回复点评
    updateCommentCount(val, item) {
      if (val) {
        item.reply_count++
      } else {
        item.reply_count--
      }
    },
    // 评论点赞
    handleCommentLike(id, val) {
      this.$api.updateTopicCommentLike(id, {
        status: val
      })
    },
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    },
    // 删除评论
    handleDeleteComment(item) {
      this.$messageBox
        .confirm('确定删除评论吗？', {
          center: true,
          type: '',
          showClose: true
        })
        .then(() => {
          this.$api.deleteTopicComment(
            item.id,
            res => {
              this.$message.success(res.msg)
              this.$emit('update')
            },
            error => {
              this.$message.error(error.msg)
            }
          )
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-list {
  .comment-item {
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    border-bottom: 1px solid $border-color-divider;
  }
  .comment-wrap {
    flex: 1;
    margin-left: 15px;
    .el-rate {
      margin-left: 10px;
    }
    .name {
      font-size: 14px;
      font-weight: 400;
      color: $text-color-secondary;
      cursor: pointer;
    }
    .lou {
      color: $text-color-auxiliary;
      font-size: 13px;
    }
    .text {
      margin-top: 5px;
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 400;
      color: $text-color-import;
      line-height: 24px;
    }
    .time-msg {
      font-size: 13px;
      font-weight: 400;
      color: $text-color-secondary;
      .msg-item + .msg-item {
        margin-left: 15px;
      }
    }
    .eval-msg {
      margin-left: auto;
      [class^='edu-icon-'],
      [class*='edu-icon-'] {
        font-size: 16px;
      }
      .el-link + .el-link {
        margin-left: 30px;
      }
      .edu-icon-pinglun {
        color: $text-color-auxiliary;
        &.active {
          @include edu-color-auxiliary;
        }
      }
      .edu-icon-dianzan_active {
        color: $text-color-auxiliary;
        &.active {
          @include edu-color-auxiliary;
        }
      }
      .num {
        font-size: 12px;
        font-weight: 400;
        color: $text-color-auxiliary;
      }
    }
    .del-btn {
      font-size: 12px;
      color: $text-color-secondary;
      cursor: pointer;
      margin-left: 30px;
    }
  }
}
</style>
